<template>
    <div class="tabbar">
        <div class="tabbar-wrap">
            <a href="javascript:void(0);" @click="changeTab(tab)" :class="{'active':tab.id == active}" v-for="tab in list" :key="tab.id">
                <i class="uicon uicon-tabbar" :class="'uicon-'+tab.ico"></i>
                <p>{{tab.name}}</p>
            </a>
        </div>
        <div class="safe-bar" :class="{'safe-bar-hide':hideSafeBar}"></div>
        <!-- <div class="safe-bar"></div> -->
    </div>
</template>
<script>
const supportPageOffset = window.pageXOffset !== undefined;
const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
export default {
    name:'ui-tab-bar',
    props:{
        active:Number
    },
    data(){
        return {
            list:[
                {
                    id:0,
                    name:'新闻',
                    ico:'news'
                },
                {
                    id:1,
                    name:'视频',
                    ico:'video'
                },{
                    id:4,
                    name:'一周热点',
                    ico:'rec'
                },
                {
                    id:2,
                    name:'圈子',
                    ico:'square'
                },{
                    id:3,
                    name:'我的',
                    ico:'me'
                }
            ],
            hideSafeBar:window.innerHeight == 635,
        }
    },
    mounted(){
        // let lastTop = document.body.scrollTop;
        // window.addEventListener('scroll',()=>{
        //     let top = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
        //     this.hideSafeBar = top<lastTop;
        //     lastTop = top;
        // },false)

        let oldWinHeight = window.innerHeight;
        window.onresize =  ()=>{
            this.hideSafeBar = window.innerHeight == 635
        }
    
    },
    methods:{
        changeTab(item){
            if(this.active == item.id) return false;
            this.$emit('change',item.id);
        }
    }
}
</script>
<style lang="less">
.tabbar {
    position: fixed;
    z-index:9999;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    border-top:1px solid #efefef;
    .tabbar-wrap {
        display: flex;
        height:104px;
    }
    a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex:1;
        font-size:20px;
        color:#919191;

        &.active {
            color:#e64a19;
        }

        p {
            margin-top:12px;
            line-height: 1
        }
    }

    .safe-bar{
        transition: height .1s linear;
        height:0;
    }
    .safe-bar-hide{
        height:0!important;
    }
    /*iPhoneX的适配*/
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        /*添加底部适配*/
        .safe-bar{
            height:48px; /*no*/
        }
    } 
}
</style>


